<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边视角模拟</title>
<script src="jquery-3.6.min.js"></script>
<script src="x6.min.js"></script>
		<script src="x6.layout.min.js"></script>
    <script src="./tippy/popperjs.js"></script>
		<script src="./tippy/tippy.min.js"></script>
        <script src="https://requirejs.org/docs/release/2.3.6/r.js"></script>
    <link rel="stylesheet" href="./tippy/tippy.css">
    <script type="module">
      
      
			import x6MainFn from "./mod/x6Main/index.js";
			import {
				nodeConfig,
				X6Config
			} from "./mod/x6Main/X6ConfigFile.js";

      window.x6MainFn = x6MainFn;
			window.nodeConfig = nodeConfig;
			window.X6Config = X6Config;
     
      </script>
</head>
<body>
  

  <div class="all">
    <select class="maximizeBtn" onchange="selectAction()" id="workspaceMode">
				<option value="1">端视角</option>
				<option value="2">边视角</option>
			</select>
    <img src="模拟流程ABC.jpg" border="0" id="imgMap" usemap="#planetmap" alt="Planets" class="val1"/>
    <map name="planetmap" id="planetmap" class="val1">
    <!-- <area shape="rect" coords="1687,14,1780,30" href="#" alt="Venus" onclick="a()"/> -->
    <area shape="circle" coords="129,161,10" href="#" alt="Mercury"  onclick="a()"/>
    <area shape="rect" coords="0,0,110,260" href="#" alt="Sun"  onclick="a()"/>
    </map>
    <!-- <div id="test" class="val2">testtesttesttest</div> -->
    <img src="边视角2.jpg" border="0" id="imgMap2" usemap="#planetmap2" alt="Planets2" class="val2"/>
    <map name="planetmap2" id="planetmap2" class="val2">
      <area shape="circle" coords="1106,160,16"  alt="Datastage" class="Datastage pos"  data-info="F"/>
      <area shape="circle" coords="1036,163,16"  alt="Python" class="Python pos" data-info="F"/>
      <area shape="circle" coords="1104,245,16"  alt="Python" class="Python pos" data-info="F"/>
      <area shape="circle" coords="1076,203,26"  alt="A" class="A pos" title="A"/>
    </map>

      <img src="./FLine.jpg" class="FInfo" alt="" width= "160px" height= "12px" style="position: absolute;top: 204px;left: 843px;">
<img src="./FKuang.png" class="FInfo" alt="" width= "129px" height= "69px" style="position: absolute;top: 204px;left: 743px;">

    <div style="display: none;">
      <div id="d1">
        <div><span>步骤名称:</span></span>XXXXX<span></span></div>
        <div><span>步骤类型:</span></span>Datastage调用<span></span></div>
      </div>
      <div id="d2">
        <div><span>步骤名称:</span></span>XXXXX<span></span></div>
        <div><span>步骤类型:</span></span>Python步骤<span></span></div>
      </div>
      <div id="yuansu">
        <img src="./tippy-APIInfo.png" alt="" width="260px" height="160px">
      </div>
    </div>
    
  </div>

  <script >
  		var graph = ""; //初始化图形对象行数
		var mainFn = ""; //初始化核心函数对象
      var x = "";
      var y = "";
    
  function a(){
    alert()
    // Kettle步骤
    //	Datastage调用
    // 服务单元SQL-API
    //	SQL计算
    //	Python步骤
  }
  function selectAction(){
    let val = $("#workspaceMode").val()
    console.log("workspaceMode",val)
    if(val=="1"){
      $(".val1").show()
      $(".val2").hide()
      $(".x6-graph-scroller").hide()
    }else{
      $(".val1").hide()
      $(".val2").show()
      $(".x6-graph-scroller").show()
    }
    
  }
//初始化
    function init(){
      // 连接器
			X6.Graph.registerConnector(
				'mindmap',
				(sourcePoint, targetPoint, routerPoints, options) => {
					const midX = sourcePoint.x + 6
					const midY = sourcePoint.y
					const ctrX = (targetPoint.x - midX) / 3 + midX + 10
					const ctrY = targetPoint.y
					const pathData = `
		     M ${sourcePoint.x} ${sourcePoint.y}
		     L ${midX} ${midY}
		     Q ${ctrX} ${ctrY} ${targetPoint.x} ${targetPoint.y}
		    `
					return options.raw ? X6.Path.parse(pathData) : pathData
				},
				true,
			)

			//初始化  函数内容
			let w = $(".all").width();
			let h = $(".all").height();
			console.log("w:", w, "  h:", h)

			graph = new X6.Graph({
				container: document.getElementById('test'),
				width: w,
				height: h,
				scroller: {
					enabled: true, //滚动
					className: "my-scroller",
				},
				panning: {
					// enabled: true, //画布可以平移
					//还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。
					eventTypes: ["leftMouseDown", "rightMouseDown", "mouseWheel"],
				},

				// async: true,
				// frozen: true,
				scroller: true, //滚动条
				// interacting: false,
				background: {
					color: "#F4F4F4", // 设置画布背景颜色

				},
				selecting: {
					enabled: false, //启用/关闭  选中
					rubberband: false, //是否启用框选
					showNodeSelectionBox: true,
					multiple: false, //多选
					movable: false, //选中是否可以移动
				},
				grid: {
					size: 10, // 网格大小 10px
					visible: false, // 渲染网格背景
					// color:"#fff"
				},
				interacting: {
					'nodeMovable': true, // 节点是否可以被移动。
				},
				connecting: {
					connector: "mindmap", //'smooth',//连线样式  smooth  曲线
				},
				resizing: {
					enabled: false,
					orthogonal: false,
					allowReverse: false,
				},
				

			});
			mainFn = x6MainFn(graph);
      getData()
    }
    function getData() {
      graph.addNode({
        id:"A",
  shape: 'ellipse',

  width: 120,
  height: 60,
  label: 'A',
  attrs: {
    body: {
      stroke: '#237804',
      fill: '#73d13d',
    },
  },

  ports: {
    groups: {
      left: {
        position: 'left',
        attrs: {
          circle: {
            magnet: false,
            stroke: 'red',
            strokeWidth: 0,
            fill: 'red',
            stroke: 'red',
            r: 0,

          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            magnet: false,
            stroke: 'red',
            strokeWidth: 0,
            fill: 'red',
            stroke: 'red',
            r: 0,

          },
        },
      }

    },
    items: [{
      id: 'port',
      group: 'left',
    }, {
      id: 'port2',
      group: 'right',
    }, ]
  }
  
})
graph.addNode({
  id:"F",
  shape: 'ellipse',

  width: 120,
  height: 60,
  label: 'F',
  attrs: {
    body: {
      stroke: '#3287D8',
      fill: '#3287D8',
    },
  },
  ports: {
    groups: {
      left: {
        position: 'left',
        attrs: {
          circle: {
            magnet: false,
            stroke: 'red',
            strokeWidth: 0,
            fill: 'red',
            stroke: 'red',
            r: 0,

          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            magnet: false,
            stroke: 'red',
            strokeWidth: 0,
            fill: 'red',
            stroke: 'red',
            r: 0,

          },
        },
      }

    },
    items: [{
      id: 'port',
      group: 'left',
    }, {
      id: 'port2',
      group: 'right',
    }, ]
  }
})


graph.addEdge({
  source:  {cell:"F",

  port:"port2"
},
  target: {cell:"A",

    port:"port"
  },
  shape: 'edge',
  attrs: {
    line: {
      stroke: '#3c4260',
      strokeWidth: 2,
      targetMarker: 'classic',
    },
  },
  tools: [
    {
      name: 'button',
      id:"dian1",
      args: {
        markup: [
          {
            naem:"buttondian",
            class:"dian",
            tagName: 'circle',
            selector: 'button',
            attrs: {
              class:"dian111",
              id:"22222",
              r: 12,
              stroke: '#fe854f',
              strokeWidth: 2,
              fill: '#fe854f',
              cursor: 'pointer',
            },
          },
        ],
        distance: -20,
         onClick(obj) {
          let data = { tempData:"222",
      tempData2:{id:'22222312',name:"button1"},
      data:{id:'222211111',name:"button1"},}
         
                console.log("tools 111",data,obj)
                
            },
      },
    },
    {
      id:"dian2",
      name: 'button',
      tempData:"11111",
      tempData2:{id:'22222',name:"button2"},
      data:{id:'22222',name:"button2"},
      args: {
        markup: [
          {
            naem:"buttondian",
            class:"dian",
            tagName: 'circle',
            selector: 'button',
            attrs: {
              r: 12,
              class:"dian111",
              id:"coos",
              stroke: '#9896F1',
              strokeWidth: 2,
              fill: '#9896F1',
              cursor: 'pointer',
            },
          },
        ],
        distance: -70,
         
            onClick(obj) {
                console.log("tools",obj)
                
            },
           
      },
    },
  ],
})

    }
  	$(document).ready(function() {
      
      // init()
      $(".pos").mouseenter(function(eve){
        // y = eve.pageY
        // x = eve.pageX
        let info = $(this).data("info")
        console.log("info",info)
        if(info=="F"){
          $(".FInfo").show()
        }
      })
      tippy('.Datastage', {
        //trigger: 'click',
        theme: 'light',
        //delay: [1000, 200],
        onShow(instance) {
          x = window.event.pageX
          y = window.event.pageY
          let id = instance.id
          setTimeout(()=>{
            $("#tippy-"+id).css("top",y)
            $("#tippy-"+id).css("left",x)
          },10)
          
        },
        onHide(instance){
            $(".FInfo").hide()
          },
        allowHTML: true,
			  content(reference) {
			    const id = "d1";
			    const template = document.getElementById(id);
			    return template.innerHTML;
			  }
			});
      tippy('.Python', {
        //trigger: 'click',
        theme: 'light',
        //delay: [1000, 200],
        onShow(instance) {
          x = window.event.pageX
          y = window.event.pageY
          let id = instance.id
          setTimeout(()=>{
            $("#tippy-"+id).css("top",y)
            $("#tippy-"+id).css("left",x)
          },10)
          
        },

        onHide(instance){
            $(".FInfo").hide()
          },
        allowHTML: true,
			  content(reference) {
			    const id = "d2";
			    const template = document.getElementById(id);
			    return template.innerHTML;
			  }
			});

      tippy('.A', {
        trigger: 'click',
        theme: 'light',

        onShow(instance) {
          let id = instance.id
          setTimeout(()=>{
            $("#tippy-"+id).css("top",238)
            $("#tippy-"+id).css("left",1070)
          },10)
        },
        onHide(instance){
            $(".FInfo").hide()
          },
        allowHTML: true,
			  content(reference) {
			    const id = "yuansu";
			    const template = document.getElementById(id);
			    return template.innerHTML;
			  }
			});
     
    })
    
</script>
</body>

<style>
  html,body{
    margin: 0;
    padding: 0;
  }
  .all{
    position: relative;
  }
  #workspaceMode{
    position: absolute;
    top: 9px;
    right: 130px;
    width: 110px;
    z-index: 99999999;
  }
  #imgMap{
    width: 1920px;
    height: 925px;
  }
  #imgMap2{
    width: 1920px;
    height: 925px;
  }
  .val1{
    display: block;
  }
  .val2{
    display:none;
  }
  .x6-graph-scroller{
    display:none;
  }
  .pos{
    cursor: pointer;
  }
  .tippy-box{
    background-color: #fff;
    color: #333;
  }
  .tippy-arrow ::before{
    background-color: #fff;
  }
  .FInfo{
    display: none;
  }
</style>
</html>